<template>
	<a-menu @click="dropdownHandler" class="avater-dtropdown-menu">
		<!-- 头像信息 -->
		<a-menu-item key="userinfo">
			<div class="avater-dtropdown-item" @click="previewUserInfo">
				<a-avatar size="large" shape="square" :src="Avatar"></a-avatar>
				<div>
					<span class="name">pushu</span>
					<span class="department">开发一部</span>
				</div>
			</div>
		</a-menu-item>
		<a-divider />
		<a-sub-menu key="appearance">
			<template #title>{{ locale.header.appearance }}</template>
			<a-menu-item key="light" :class="{ 'ant-menu-item-active': themeMode === 'light' }">
				<i class="iconfont icon-taiyang"></i>
				{{ locale.header.light }}
			</a-menu-item>
			<a-menu-item key="dark" :class="{ 'ant-menu-item-active': themeMode === 'dark' }">
				<i class="iconfont icon-yueliang"></i>
				{{ locale.header.dark }}
			</a-menu-item>
			<a-menu-item key="system" :class="{ 'ant-menu-item-active': themeMode === 'system' }">
				<i class="iconfont icon-gensuixitong"></i>
				{{ locale.header.system }}
			</a-menu-item>
		</a-sub-menu>
		<a-sub-menu key="language">
			<template #title>{{ locale.header.language }}</template>
			<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-cn' }" key="zh-cn">{{ locale.login.langArray[0] }}</a-menu-item>
			<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-tw' }" key="zh-tw">{{ locale.login.langArray[1] }}</a-menu-item>
			<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'en' }" key="en">{{ locale.login.langArray[2] }}</a-menu-item>
		</a-sub-menu>
		<a-divider />
		<a-menu-item key="help">
			<span>{{ locale.header.help }}</span>
		</a-menu-item>
		<a-menu-item key="setting">
			<span>{{ locale.header.setting }}</span>
		</a-menu-item>
		<a-divider />
		<a-menu-item key="exit">
			<a-button type="link" size="small" block>{{ locale.header.exit }}</a-button>
		</a-menu-item>
	</a-menu>
</template>

<script setup lang="ts">
import { i18n } from '../../../i18n';
import router from '../../../router';
import { MenuProps } from 'ant-design-vue';
import { setTheme } from '../../../utils/theme';
import Avatar from '../../../assets/avatar.jpg';
import { useTheme } from '../../../hooks/theme';
import { useLocale } from '../../../hooks/locale';
import { Language } from '../../../interface/i18n';
import { localForage } from '../../../localforage';

// 多语言 hooks
const { locale } = useLocale();

// 引入主题相关 hook

const { themeMode } = useTheme();

// 预览用户信息
function previewUserInfo() {
	console.log('预览用户信息');
}

// 下拉菜单点击事件
const dropdownHandler: MenuProps['onClick'] = ({ key }) => {
	key = <string>key;

	// 这里是利用了 a-menu 菜单的特性实现 因此 light dark system zh-cn zh-tw en help setting 是独立的 key
	if (['light', 'dark', 'system'].includes(key)) setTheme(key);
	else if (['zh-cn', 'zh-tw', 'en'].includes(key)) i18n.setLanguage(<Language>key);
	else if (key === 'help') {
		console.log('帮助中心');
	} else if (key === 'setting') {
		console.log('系统设置');
	} else if (key === 'exit') exit();
};

// 退出登录
function exit() {
	router.push('/login');
	// 清空 user token
	localForage.removeItem('token');
}
</script>

<style lang="less" scoped>
.avater-dtropdown-menu {
	width: 220px;
	:deep .ant-dropdown-menu-title-content {
		width: 100%;
	}
}

// 头像信息
.avater-dtropdown-item {
	width: 100%;
	min-height: 36px;
	user-select: none;
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	overflow: hidden;
	transition: all 0.3s;
	& > div {
		margin-left: 10px;
		width: calc(100% - 56px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		span {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			vertical-align: top;
		}
		.name {
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			word-break: break-all;
		}
		.department {
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			word-break: break-all;
		}
	}
}
</style>
